/* Full-page background layer (fixed) — placed behind page content (z-index: -1)
   Uses:
     src/assets/wind-turbine-bg.jpg  (风力发电机背景)
   Path: src/styles/backgrounds.css
*/

/* Full viewport background, behind everything */
.site-bg {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  z-index: -1; /* put it behind the page content */
  pointer-events: none; /* don't block interactions */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image .3s ease-in-out, opacity .25s ease;
  /* ensure it's visually full-bleed even behind scrollbars */
  will-change: background-image, opacity;
}

/* Use a combined linear-gradient overlay + image to avoid stacking issues with pseudo elements */
.site-bg.bg-home {
  background-image:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url('../assets/wind-turbine-bg.jpg');
}

.site-bg.bg-core {
  background-image:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url('../assets/wind-turbine-bg.jpg');
}

/* Page wrapper: keep content above the .site-bg */
.page-bg {
  position: relative;
  min-height: 100vh;
  z-index: 1;
}

/* Ensure container and its children render above the background layer */
.page-bg > .container,
.page-bg > .container * {
  position: relative;
  z-index: 2;
}

/* If you want a lighter overlay on some pages, use .site-bg.light-overlay */
.site-bg.light-overlay {
  background-image:
    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
    url('../assets/wind-turbine-bg.jpg');
}

/* Slight responsive tweak */
@media (max-width: 900px) {
  .site-bg { background-position: center top; }
}